.data-main-div{
  .data-title{
    background: #fff;
    border-radius: 8px;
    height:42px;
    display: flex;
    justify-content: space-between;
    padding:0 10px;
    align-items: center;
    .title-left{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .title-item{
        color:#adbfd9;
        font-size: 12px;
        padding:0 10px;
        border-right:1px solid #adbfd9;
        cursor: pointer;
      }
      .title-item.choose{
        color:#5e83f1;
        font-weight: bold;
      }
      .title-item.choose:hover{
        color:#5e83f1;
      }
      .title-item:last-child{
        border-right: 0;
      }
      .title-item:hover{
        color:#8e9aab
      }
    }
    .title-right{
      display: flex;
      justify-items: flex-start;
      align-items: center;
    }
    .el-radio-button__orig-radio:checked+.el-radio-button__inner{
      background-color:#5f83f1;
      border-color:#5f83f1
    }
    .el-input--mini .el-input__inner{
      height: 28px !important;
    }
  }
  .order-block{
    margin-top:10px;
    display: flex;
    justify-items: flex-start;
    align-items: flex-start;
    .order-num.pums{
      .order-num-item{
        width:202px;
      }
    }
    .order-num{
      width:480px;
      height:366px;
      display: flex;
      justify-items: flex-start;
      align-items: flex-start;
      flex-wrap: wrap;
      align-content: flex-start;
      .order-num-item{
        width:160px;
        padding-left: 30px;
        margin-top: 22px;
        .num-item-top{
          width:100px;
          font-size: 12px;
          color:#7f8999;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .el-icon-caret-right{
            font-size: 13px;
          }
        }
        .num-item-bottom{
          margin-top:15px;
          display: flex;
          justify-items: flex-start;
          align-items: flex-end;
          border-right: 1px solid #d7deec;
          cursor: pointer;
          .bottom-icon{
            width:34px;
            height:34px;
            border-radius: 8px;
            background: #dbe2fa;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .bottom-num{
            font-size:18px;
            font-weight: bold;
            padding-left: 20px;
            cursor: pointer;
            .span{
              font-size: 12px;
              font-weight: normal;
            }

          }
          .bottom-num:hover{
            text-decoration: underline;
          }
        }
      }
      .order-num-item:first-child{
        padding-left: 15px;
      }
      .order-num-item:nth-child(3n+1){
        padding-left: 15px;
      }
      .yellow.order-num-item{
        .bottom-icon{
          background: #faf3db;
        }
        .bottom-num{
          color:#f4bb63
        }
      }
      .gary.order-num-item{
        .bottom-icon{
          background: #eaeaea;
        }
        .bottom-num{
          color:#a5a5a5
        }
      }
      .red.order-num-item{
        .bottom-icon{
          background: #fadbdb;
        }
        .bottom-num{
          color:#e71f19
        }
      }
      .order-num-item:nth-child(3n+3){
        .num-item-bottom{
          border-right: 0;
        }
      }
    }
    .order-table{
      width:calc(100% - 490px);
      height:366px;
      margin-left: 10px;
      padding:15px;
      padding-bottom:0;
      .pagination-container{
        margin-top: 10px;
        .el-pagination.is-background .el-pager li:not(.disabled).active{
          background: #5e83f1;
        }
      }
      .el-table th{
        background: #eff2fc;
        color:#000;
        font-size:14px;
      }
      .el-table__footer-wrapper, .el-table__header-wrapper{
        border-radius: 8px;
        overflow: hidden;
      }
      .el-table tr{
        background: #fff;
        font-size:14px;
        .el-link{
          font-size:14px;
        }
      }
      .el-table th:first-child{
        border-top-left-radius: 8px;
        border-bottom-left-radius: 8px;
      }
      .el-table th.is-center:last-child{
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
      }
    }
    .pie-block{
      width:586px;
      height:426px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .pie-menu{
        width:120px;
        padding-top: 20px;
        padding-left: 20px;
        .pie-menu-item{
          font-size:14px;
          color:#87909f;
          height:26px;
          line-height: 26px;
          text-align: center;
          min-width:60px;
          border-radius: 10px;
          cursor: pointer;
          margin-bottom: 16px;
          padding:0 10px
        }
        .pie-menu-item:hover{
          background: #eef0f4;
        }
        .pie-menu-item.choose{
          background: #ffb80d;
          color:#fff;
        }
        .customer-out{
          padding:12px 8px;
          border: 1px solid #dcdfe6;
          border-radius: 8px;
          box-shadow: 0 0 8px rgba(0,0,0,0.1);
          margin-top:160px;
          .out-item{
            padding:10px 0;
            .item-label{
              color:#87909f;
              font-size:12px;
            }
            .item-num{
              font-size:14px;
              font-weight: bold;
              cursor: pointer;
              margin-top: 2px;
            }
            .item-num:hover{
              text-decoration: underline;
            }
          }
        }
      }
      #pieChart,#pieChart2{
        width:calc(100% - 120px)
      }
    }
    .order-table.pie-table{
      width:calc(100% - 596px);
      height:426px;
    }
    .inquiry-block{
      height:360px;
      width:100%;
    }

  }
  .sum-block{
    margin-top: 10px;
    .sum-block-item{
      border-radius: 8px;
      background: linear-gradient(to bottom, #ffffff 90%, #fff0f0 100%);
      border:1px solid #ffd2d2;
      overflow: hidden;
      padding-bottom: 20px;
      .sum-title{
        height:50px;
        background: linear-gradient(to bottom, #fff0f0, #ffffff);
        color:#e30a0a;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 44px;
      }
      .sum-con{
        padding:0 12px;
        .sum-con-div{
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom:1px solid #e8e8e8;
          height:56px;
          line-height: 56px;
          .label{
            font-size: 12px;
            color:#76777c;
          }
          .num{
            font-size: 18px;
            font-weight: bold;
            color:#e30a0a;

            .unit{
              font-size: 12px;
              font-weight: 400;
              padding-left: 5px;
            }
          }
        }
      }

    }
    .el-col-6:nth-child(2){
      .sum-block-item{
        background: linear-gradient(to bottom, #ffffff 90%, #f7ebff 100%);
        border:1px solid #f5d2ff;
        .sum-title{
          background: linear-gradient(to bottom, #f7ebff, #ffffff);
          color:#8252e9;
        }
        .sum-con{
          .sum-con-div{
            .num{
              color:#8252e9;
            }
          }
        }

      }
    }
    .el-col-6:nth-child(3){
      .sum-block-item{
        background: linear-gradient(to bottom, #ffffff 90%, #e8edff 100%);
        border:1px solid #b9eef7;
        .sum-title{
          background: linear-gradient(to bottom, #e8edff, #ffffff);
          color:#0dcaf0;
        }
        .sum-con{
          .sum-con-div{
            .num{
              color:#0dcaf0;
            }
          }
        }

      }
    }
    .el-col-6:nth-child(4){
      .sum-block-item{
        background: linear-gradient(to bottom, #ffffff 90%, #ecfff7 100%);
        border:1px solid #c5f8be;
        .sum-title{
          background: linear-gradient(to bottom, #ecfff7, #ffffff);
          color:#45b369;
        }
        .sum-con{
          .sum-con-div{
            .num{
              color:#45b369;
            }
          }
        }

      }
    }
  }
  .target-block{
    margin-top: 10px;
    .target-item{
      border-radius: 8px;
      display: flex;
      justify-content:space-between;
      align-items: center;
      background: linear-gradient(to right, #e9faff, #fbfeff);
      padding:12px;
      line-height: 20px;
      .target-label{
        color:#76777c;
        font-size: 12px;
      }
      .target-num{
        font-size: 30px;
        font-weight: bold;
        margin-top: 10px;
        .unit{
          font-size: 12px;
          font-weight: 400;
        }
      }
      .target-differ{
        font-size: 12px;
        margin-top: 16px;
        .unit{
          font-weight: bold;
          padding-left: 10px;
        }
      }
      .target-differ.green{
        .unit{
          color:#59e652
        }
      }
      .target-differ.red{
        .unit{
          color:#e30a0a
        }
      }
      .el-progress__text{
        font-size: 18px !important;
        color: #00b8f2;
        font-weight: bold;
      }
    }
    .target-item.purple{
      background: linear-gradient(to right, #f8ecff, #fbfeff);
      .el-progress__text{
        color: #ae91ee;
      }
    }
    .target-item.bule{
      background: linear-gradient(to right, #e8edff, #fbfeff);
      .el-progress__text{
        color: #3860f2;
      }
    }
    .target-item.green{
      background: linear-gradient(to right, #ecfff7, #fbfeff);
      .el-progress__text{
        color: #45b369;
      }
    }
  }
}
